<!--
 * @Author: windys
 * @Description: 微信登录绑定
 * @Date: 2022-02-24 13:27:32
-->
<template>
  <div class="bind_page">
    <img src="@/assets/img/caihu.png" alt="" srcset="" />
    <h4>新用户首次登录绑定微信</h4>
    <div class="login_form">
      <van-cell-group inset>
        <van-field
          clearable
          label=" "
          left-icon="phone-o"
          placeholder="请输入手机"
          maxlength="11"
          label-width="0px"
          v-model="data.mobile"
        />
        <van-field
          clearable
          label=" "
          left-icon="underway-o"
          placeholder="请输入验证码"
          label-width="0px"
          maxlength="6"
          v-model="data.checkCode"
        >
          <template #button>
            <van-button
              size="mini"
              round
              type="warning"
              plain
              @click="handleGetCode"
              >{{ btnTxt }}</van-button
            >
          </template>
        </van-field>

        <van-button
          type="primary"
          round
          block
          style="margin: 40px 0"
          @click="handleLogin"
          >立 即 登 录</van-button
        >
      </van-cell-group>
    </div>
  </div>
</template>


<script>
import { defineComponent, reactive, ref } from "vue";
import { wxBindLogin, getCode } from "@/api/login";
import { useRoute, useRouter } from "vue-router";
import storage from "@/utils/storage.js";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      unionId: route.query.unionId,
      mobile: "",
      checkCode: "",
      wxNick: route.query.nick,
      headUrl: decodeURIComponent(route.query.headUrl),
      inviteCode: window.localStorage.getItem("JSfrom") || "",
    });

    const btnTxt = ref("获取验证码");
    const handleGetCode = async () => {
      let num = 60;
      const res = await getCode({
        mobile: login_data.mobile,
        type: 4,
      });
      var timer = setInterval(() => {
        if (num <= 0) {
          num = 60;
          btnTxt.value = "获取验证码";
          clearInterval(timer);
        } else {
          num--;
          btnTxt.value = `${num}s后获取`;
        }
      }, 1000);
    };

    const handleLogin = async () => {
      const res = await wxBindLogin(data);
      if (typeof res !== "number") {
        storage.setStorage("v3_userinfo_mobile", JSON.stringify(res.user));
        storage.setStorage("token", res.token);
        storage.setStorage("pwd", JSON.stringify({}));
        router.push("/my");
      }
    };
    return {
      data,
      btnTxt,
      handleGetCode,
      handleLogin,
    };
  },
});
</script>




<style lang="scss" scoped>
.bind_page {
  padding-top: 20%;
  text-align: center;
  img{
      width: 50px;
      height: 50px;
  }
  h4{
      font-size: 20px;
  }
}
</style>